<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="keywords"
        content="富文本编辑器、树形列表、树形控件、树控件、手风琴、拾色器、多文件上传、弹窗组件、模态窗口、双向联动表单、右键菜单、jquery拖动、draggable、datagrid、tree、mvvm、combox、tab" />
    <meta name="description"
        content="Bui editor ui框架是一套前后端分离，包含富文本编辑器、双向联动表单、树形列表、树形控件、模态窗口、手风琴、拾色器、多文件上传、弹窗组件等全功能UI框架。还包括Spring mvc spring mybatis高效开发框架" />
    <link rel="shortcut icon" href="/favicon.ico" />
    <link rel="bookmark" href="/favicon.ico" />
    <meta name="renderer" content="webkit|ie-stand" />
    <link type="text/css" rel="stylesheet" lang="stylesheet" href="../theme/default/base.css" />
    <link type="text/css" rel="stylesheet" lang="stylesheet" href="../theme/default/accordion.css" />
    <link type="text/css" rel="stylesheet" lang="stylesheet" href="../theme/font/bui-fonts.min.css" />
    <link type="text/css" rel="stylesheet" lang="stylesheet" href="../theme/default/tree.css" />
    <script type="text/javascript" src="../javascript/basic-2.0.0.js"></script>
    <script type="text/javascript" src="../javascript/plugins-2.0.0.js"></script>
    <script type="text/javascript" src="../javascript/accordion-2.0.0.js"></script>
    <script type="text/javascript" src="../javascript/tree-2.0.0.js"></script>
    <script type="text/javascript" src="lang_config.js"></script>
    <style>
        #wrap {
            width: 100%;
            height: 100%;
            padding: 10px 10px;
        }      
    </style>
</head>

<body>
    <div id="wrap" class="k_box_size">
        <h1 class="section-title">手风琴远程ajax/html/iframe/自定义样式--demo</h1>
        <div style="height:600px" class="section-body clearfix">
            <div style="height:100%;width: 46%;float: left; ">
                <div id="accordion"></div>
            </div>
            <div style="height:100%;width: 46%;float: right; ">
                <div id="accordion1">
                </div>
            </div>
        </div>
    </div>

    <script type="text/javascript"> 
        var accordion;
        function pageLoaded() {
            var opts = {
                iconCls: 'fa-angle-double-right', //收起图标
                iconPositon: 'right', //图标位置
                iconColor: '#666666', //图标颜色           
                onCreate: function (name) {
                    console.log(name + "  onCreate " + this.outerHTML);
                },
                onOpened: function (name) {
                    console.log(name + "  onOpened " + this.outerHTML);
                },
                onLoaded: function (data,title,type) { //加载完成                   
                    if (type === "json") {
                        console.log(JSON.stringify(data));  
                        this.innerHTML = "<div><ul/></div>";
                        let ul = this.firstChild.firstChild;
                        new $B.Tree(ul, {
                            data: data,
                            url: 'tree.json',                          
                            onClick: function (e) {
                                console.log("on click");
                                console.log(e.data);
                            },
                            onChecked: function (data, ischecked) {
                                console.log("onChecked ");
                                console.log(JSON.stringify(data));
                            }
                        });                      
                    }
                },
                items: [{
                        title: '项目远程加载html片段',
                        icon: 'fa-menu',
                        type: 'html',
                        url: "fragment.html"
                    },
                    {
                        actived: true,
                        title: '远程加载页面【firame】',
                        type: 'iframe',
                        icon: 'fa-database',
                        url: "resize.html"
                    },
                    {
                        title: '远程加载json',
                        type: 'json',
                        icon: 'fa-cubes',
                        url: "tree.json"
                    },
                    {
                        title: '项目A',
                        content: '<div>项目静态内容</div>'
                    },
                    {
                        title: '项目B',
                        content: '<div>项目静态内容</div>'
                    }
                ]
            };
            accordion = new $B.Accordion("#accordion", opts);
            opts.iconCls = 'fa-right-open-1'; //收起图标         
            opts.iconPositon = 'right'; //图标位置
            opts.iconColor = '#666666'; //图标颜色
            opts.fontStyle = {
                "font-size": "14px",
                "font-weight": "bold",
                "color": "#666666"
            }; //标题字体颜色、大小配置
            opts.activedStyle = {
                "background": "#1C2428",
                "color": "#FFFFFF",
                "iconColor": '#FFFFFF'
            }; //激活状态样式            
            // opts.accordionStyle = {
            //     "background": "#ffffff",
            //     "border": "1px solid #364248"
            // }; //手风琴边框、颜色定义
            accordion = new $B.Accordion("#accordion1", opts);
        };
        $B.DomUtils.onDomLoaded(function () {
            pageLoaded();
        });
    </script>
</body>

</html>